<template>
    <div class="fenlei-page">
        <div class="top-seach">
            <div class="input-box">
                <span></span> <input type="text" />
            </div>
        </div>
        <div class="content">
            <div class="left">
                <ul>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                    <li>蔬菜豆菇</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <ul>
                            <li>
                                <div class="img"></div>
                                <span>西红柿</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>



<script>

export default {
    
}
</script>

<style lang="less" rel="stylesheet/less">
.fenlei-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
       width:100%;
       height:0.88rem;
       position:fixed;
       top:0;
       left:0;
       z-index:11;
       background:#00D397;
       .input-box{
           width:90%;
           margin:0.14rem auto;
           background:#fff;
           height:0.6rem;
           display:flex;
           span{
               display:inline-block;
               width:0.6rem;
               height:0.6rem;
               background:url('seach.png') no-repeat;
               background-size:0.34rem 0.31rem;
               background-position: 0.18rem 0.14rem;
           }
           input{
               width:6.1rem;
               height:0.6rem;
               font-size:0.12rem;
               color:#9099A7;
           }
       }
   } 
   .content{
       width:100%;
       height:auto;
       display:flex;
       .left{
           width:2.32rem;
           height:auto;
           border-right: 1px solid #E4E7EB;
           ul{
               li{
                   width:100%;
                   height:1.18rem;
                   line-height:1.18rem;
                   font-size: 0.28rem;
                   color: #666666;
                   text-align:center;
               }
           }
       }
       .right{
           flex:1;
           height:auto;
           ul{
               li{
                   ul{
                       width:100%;
                       display:flex;
                       flex-wrap:wrap;
                       li{
                           width:1.4rem;
                           margin:0.28rem 0 0 0.28rem;
                           .img{
                               width:1.4rem;
                               height:1.4rem;
                               img{
                                   width:100%;
                                   height:100%;
                               }
                           }
                           span{
                               display:block;
                               text-align:center;
                               font-size: 0.24rem;
                               color: #999999;
                               margin-top:0.15rem;
                           }
                       }
                   }
               }
           }
       }
   }
}
</style>

